<template>
  <div class="container">
    <!-- 外层大卡片 -->
    <el-card class="el-card">

      <!-- 新增试题区域 -->
      <el-row type="flex" justify="end" align="middle">
        <el-col
          :span="1.5"
        ><el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('new')"
        >新增试题</el-button></el-col>
      </el-row>
      <!-- /新增试题区域 -->
      <el-form class="el-form" label-width="80px" :model="formData">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="formData.subjectID"
                size="small"
                style="width: 100%"
                placeholder="请选择"
                @change="changeSubject"
              >
                <el-option
                  v-for="item in Subject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="试题类型">
              <el-select
                v-model="formData.questionType"
                size="small"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="formData.twoLevelDirectory"
                size="small"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in twoLevelDirectory"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                /> </el-select>
            </el-form-item>
            <el-form-item label="难度">
              <el-select
                v-model="formData.difficulty"
                size="small"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="formData.tags"
                size="small"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in tags"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="方向">
              <el-select
                v-model="formData.direction"
                size="small"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="城市">
              <el-row type="flex" justify="space-between">
                <el-select
                  v-model="formData.province"
                  size="small"
                  style="width: 49%"
                  placeholder="请选择"
                  @change="cityChange"
                >
                  <el-option
                    v-for="item in provinces"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-select
                  v-model="formData.city"
                  size="small"
                  style="width: 49%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="formData.keywords" size="small" />
            </el-form-item>
            <el-form-item label="录入人">
              <el-select
                v-model="formData.creatorID"
                size="small"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in userLists"
                  :key="item.id"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-row type="flex" justify="end">
                <el-button size="small" @click="clear">清除</el-button>
                <el-button type="primary" size="small" @click="search">搜索</el-button>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab栏区域 -->
      <el-tabs v-model="activeName" type="card" @tab-click="hTab">
        <!-- 全部 -->
        <el-tab-pane label="全部" name="0" />
        <!-- 待审核区域 -->
        <el-tab-pane label="待审核" name="1" />
        <!-- 已审核区域 -->
        <el-tab-pane label="已审核" name="2" />
        <!-- 已拒绝区域 -->
        <el-tab-pane label="已拒绝" name="3" />
        <!-- 总条数 -->
        <el-alert type="info" show-icon :closable="false">
          <template slot="title">
            数据一共{{ page.total }}条
          </template>
        </el-alert>
        <!-- tab表格项 -->
        <el-table
          :data="choiceList"
          style="width: 100%"
          :header-cell-style="{ 'border-bottom': 'solid 2px #e8e8e8' }"
        >
          <el-table-column prop="number" label="试题编号" width="120" />
          <el-table-column prop="subject" label="学科" width="120" />
          <el-table-column prop="catalog" label="目录" width="120" />
          <el-table-column
            prop="questionType"
            label="题型"
            width="120"
            :formatter="formatQuestionType"
          />
          <el-table-column label="题干" width="280">
            <template slot-scope="scope">
              <div v-html="scope.row.question" />
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <!-- 作用域插槽 -->
            <template slot-scope="{ row }">{{
              row.addDate | parseTimeByString
            }}</template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="100"
            :formatter="formatDifficulty"
          />
          <el-table-column prop="creator" label="录入人" width="120" />
          <el-table-column
            prop="chkState"
            label="审核状态"
            width="120"
            :formatter="formatChkType"
          />
          <el-table-column prop="chkRemarks" label="审核意见" width="120" />
          <el-table-column prop="chkUser" label="审核人" width="120" />
          <el-table-column
            prop="publishState"
            label="发布状态"
            width="120"
            :formatter="formatPublishType"
          />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleClick(scope.row)"
              >预览</el-button>
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.chkState == 2"
                @click="auditClick(scope.row)"
              >审核</el-button>
              <el-button type="text" size="small" :disabled="scope.row.publishState == 1" @click="$router.push({path: 'new',query:{id:scope.row.id}})">修改</el-button>
              <el-button type="text" size="small" @click="putawayClick(scope.row)">{{ scope.row.publishState==1?'下架':'上架' }}</el-button>
              <el-button type="text" size="small" @click="clickDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
      <!-- 分页功能 -->
      <el-row type="flex" justify="end" class="paging">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          :total="page.total"
          :current-page.sync="page.page"
          @size-change="handleSizeChange"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <!-- 审核弹出框 -->
    <questionsCheck :show-audit.sync="showAudit" :row-audit="rowAudit" />
    <!-- 视频预览组件 -->
    <questionsPreview ref="questionsref" :questions-previewshow.sync="questionsPreviewshow" />
  </div>
</template>

<script>
import {
  difficulty,
  questionType,
  direction,
  chkType,
  publishType
} from '@/api/hmmm/constants'  //格式化枚举
import { simple  } from '@/api/hmmm/subjects'  //学科列表
import { simple as twoLeveList } from '@/api/hmmm/directorys' 
import {simple as tagsList} from '@/api/hmmm/tags'  //标签
import { list as getUserlist } from '../../api/base/users' // 获取录入人
import questionsPreview from '../components/questions-preview.vue' // 引入视频预览组件
import questionsCheck from '../components/questions-check.vue'  //审核功能弹出层
import { provinces, citys } from '@/api/hmmm/citys' // 城市系列
import { choice, choicePublish, remove } from '@/api/hmmm/questions' // 精选题库
export default {
  components: {
    questionsCheck,
    questionsPreview
  },
  data () {
    return {
      questionsPreviewshow: false, // 这是控制预览的组件
      page: {
        page: 1, // 当前页码
        pagesize: 5,
        total: null, // 总数
        chkState: null // 初始的审核状态未知 显示全部数据
      },
      showAudit: false, // 审核弹出框
      rowAudit: {}, // 审批传递的数据
      activeName: '0', // 默认选中的tab项
      formData: {
        subjectID: null, // 学科
        twoLevelDirectory: null, // 二级目录
        difficulty: null, // 难度
        questionType: null, // 试题类型
        direction: null, // 方向
        province: null, // 城市
        city: null, // 子城市
        creatorID: null, // 录入人
        tags: null, // 标签
        keywords: null, // 关键字
        remarks: null, // 题目备注
        shortName: null // 企业简称

      },
      Subject: [], // 学科简单列表
      twoLevelDirectory: [], // 二级目录
      tags: [], // 存放标签
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向下拉菜单
      userLists: [], // 存放录入人
      provinces: provinces(), // 所有城市
      cityList: [], // 存放子城市
      choiceList: [] // 存放选题库列表

    }
  },
  created () {
    this.getList() // 获取学科列表
    this.getChoice() // 获取精选题库列表
    this.getUserList() // 获取录入人
  },

  methods: {
    // 预览
    handleClick (row) {
      this.$refs.questionsref.detail(row)
      this.questionsPreviewshow = true
    },
    // 获取录入人
    async getUserList () {
      const data = await getUserlist()
      this.userLists = data.data.list.map((item) => {
        return item.username
      })
    },
    // 获取学科
    async getList () {
      const { data } = await simple ()
      this.Subject = data
    },
    // 获取二级目录
    async changeSubject (subjectID) {
      this.formData.twoLevelDirectory=null
      this.formData.tags=null
      if (subjectID){
        const {data: twoLeveArr}=await twoLeveList({subjectID})
        this.twoLevelDirectory=twoLeveArr
        const {data: tagsArr}=await tagsList({subjectID})
        this.tags=tagsArr
      }
    },
    // 渲染市
    async cityChange (val) {
      const res = citys(val)
      this.cityList = res
    },
    // 清空列表
    clear () {
      this.tags = []
      this.twoLevelDirectory = []
      for (let key in this.formData){
        this.formData[key]=null
      }
      this.getChoice()
    },
    // tab栏切换
    hTab () {
      if (this.activeName === '0') {
        this.page.chkState = null
        this.getChoice()
        return
      } 
      this.page.chkState = this.activeName
      this.getChoice()
    },
    // 搜索功能
    async  search () {
      this.page.page = 1
      this.getChoice()
    }, // 获取题库列表
    async getChoice () {
      try {
        const { data } = await choice({ subjectID: this.formData.subjectID || null, keyword: this.formData.keywords, ...this.page })
        this.page.total = data.counts
        this.choiceList = data.items
      } catch (error) { console.log(error) }
    },
    // 每条页数改变
    handleSizeChange (size) {
      this.page.pagesize = size
      this.getChoice()
    },
    // 页码数改变时会触发
    changePage (newPage) {
      this.page.page = newPage
      this.getChoice()
    },
    // 格式化题型
    formatQuestionType (row, column, cellValue) {
      const obj = questionType.find(
        (item) => item.value.toString() === cellValue
      )
      return obj ? obj.label : null
    },
    // 格式化难度
    formatDifficulty (row, column, cellValue) {
      const obj = difficulty.find(
        (item) => item.value.toString() === cellValue
      )
      return obj ? obj.label : null
    },
    // 格式化审核状态
    formatChkType (row, column, cellValue) {
      const obj = chkType.find((item) => item.value === cellValue)
      return obj ? obj.label : null
    },
    // 格式化发布状态
    formatPublishType (row, column, cellValue) {
      const obj = publishType.find((item) => item.value === cellValue)
      return obj ? obj.label : null
    },
    // 审核弹出框
    auditClick (row) {
      this.showAudit = true
      this.rowAudit = row
    },
    // 上下架
    putawayClick (row) {
      // console.log(row)
      this.$confirm(`你确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (row.publishState === 0) {
          // 上架
          await choicePublish({ id: row.id, publishState: 1 })
        } else if (row.publishState === 1) {
          // 下架
          await choicePublish({ id: row.id, publishState: 0 })
        }
        this.getChoice()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch((error) => {
        console.log(error)
      })
    },
    // 删除功能
    clickDelete (row) {
      this.$confirm('此操作将永久删除该题目，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: row.id })
        this.getChoice()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch((error) => {
        console.log(error)
     
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.el-card {
  margin: 10px;
}
.el-form {
  padding: 13px 0;
}
.el-form-item {
  margin-bottom: 13px;
}
.paging {
  padding-top: 20px;
}
::v-deep .el-pagination__jump {
  margin-left: 0px;
}
.el-tabs {
  margin-top: -10px;
}
.el-table {
  margin-top: 15px;
}
::v-deep .el-table th {
  background-color: #fafafa;
}
</style>
